<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 文件监控</el-breadcrumb-item>
                <el-breadcrumb-item>文件监控设置</el-breadcrumb-item>
                <el-breadcrumb-item>新建文件监控</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="3"><span>监控内容描述：</span></el-col>
                <el-col :span="3"><el-input></el-input></el-col>
                <el-col :span="2"><span>FTP服务器:</span></el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择" v-model="dataSource">
                      <el-option value="1" label="收入接口文件" key="1"></el-option>
                      <el-option value="2" label="源二" key="2"></el-option>
                    </el-select> 
                </el-col>
                <el-col :span="2"><span>文件服务器：</span></el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择" v-model="dataSource">
                      <el-option value="1" label="收入系统接口出现.No文件" key="1"></el-option>
                      <el-option value="2" label="源二" key="2"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <div class="mt20">
                <el-tabs v-model="sqltag" type="card" @tab-click="handleClick">
                    <el-tab-pane label="规则定义" name="first">
                        <div class="tab_content">
                            <el-row>
                                <el-col :span="2"><span>目录：</span></el-col>
                                <el-col :span="4"><el-input></el-input></el-col>
                                <el-col :span="4" :offset="1"><el-checkbox v-model="includeChild">包含子目录</el-checkbox></el-col>
                            </el-row>
                            <el-row class="setTitle mt20">
                                <el-col :span="2" ><span>文件规则</span></el-col>
                            </el-row>
                            <el-row class="mt20">
                                <el-col :span="2"><span>文件名称：</span></el-col>
                                <el-col :span="3">
                                    <el-select placeholder="请选择" v-model="dataSource">
                                        <el-option value="1" label="前缀名" key="1"></el-option>
                                        <el-option value="2" label="后缀名" key="2"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" class="ml10"><el-input></el-input></el-col>
                            </el-row>
                            <el-row class="mt20">
                                <el-col :span="3"><span>文件名称长度：</span></el-col>
                                <el-col :span="3">
                                    <el-select placeholder="请选择" v-model="dataSource">
                                        <el-option value="1" label="大于" key="1"></el-option>
                                        <el-option value="2" label="后缀名" key="2"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" class="ml10"><el-input></el-input></el-col>
                                <el-col :span="4" class="mt5 ml10">
                                    <el-radio v-model="radio" label="1">或者</el-radio>
                                    <el-radio v-model="radio" label="2">并且</el-radio>
                                </el-col>
                                <el-col :span="3">
                                    <el-select placeholder="请选择" v-model="dataSource">
                                        <el-option value="1" label="大于" key="1"></el-option>
                                        <el-option value="2" label="后缀名" key="2"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" class="ml10"><el-input></el-input></el-col>
                            </el-row>
                            <el-row class="mt20">
                                <el-col :span="3"><span>文件大小：</span></el-col>
                                <el-col :span="3">
                                    <el-select placeholder="请选择" v-model="dataSource">
                                        <el-option value="1" label="大于" key="1"></el-option>
                                        <el-option value="2" label="后缀名" key="2"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" class="ml10"><el-input></el-input></el-col>
                                <el-col :span="4" class="mt5 ml10">
                                    <el-radio v-model="radio" label="1">或者</el-radio>
                                    <el-radio v-model="radio" label="2">并且</el-radio>
                                </el-col>
                                <el-col :span="3">
                                    <el-select placeholder="请选择" v-model="dataSource">
                                        <el-option value="1" label="大于" key="1"></el-option>
                                        <el-option value="2" label="后缀名" key="2"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" class="ml10"><el-input></el-input></el-col>
                            </el-row>
                            <el-row class="mt20">
                                <el-col :span="3"><span>创建日期：</span></el-col>
                                <el-col :span="3">
                                    <el-select placeholder="请选择" v-model="dataSource">
                                        <el-option value="1" label="早于" key="1"></el-option>
                                        <el-option value="2" label="后缀名" key="2"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" class="ml10"><el-input></el-input></el-col>
                                <el-col :span="4" class="mt5 ml10">
                                    <el-radio v-model="radio" label="1">或者</el-radio>
                                    <el-radio v-model="radio" label="2">并且</el-radio>
                                </el-col>
                                <el-col :span="3">
                                    <el-select placeholder="请选择" v-model="dataSource">
                                        <el-option value="1" label="早于" key="1"></el-option>
                                        <el-option value="2" label="后缀名" key="2"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4" class="ml10"><el-input></el-input></el-col>
                            </el-row>
                            <div class="r mt20">
                                <el-button type="primary">下一步</el-button>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="调度" name="third">
                        <el-row class="setTitle">
                            <el-col :span="2" ><span>调度方式</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="4" :offset="1">
                                <el-select v-model="frequency" placeholder="请选择">
                                    <el-option
                                        v-for="item in freValue"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2"><span>日期：</span></el-col>
                            <el-col :span="4">
                                <el-input></el-input>
                            </el-col>
                            <el-col :span="2"><span>时间：</span></el-col>
                            <el-col :span="4">
                                <el-input></el-input>
                            </el-col>
                        </el-row>
                        <el-row class="setTitle mt20">
                            <el-col :span="2" ><span>即时通讯</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="4" :offset="1">
                                <el-select v-model="jstx" placeholder="请选择">
                                    <el-option
                                        v-for="item in jstxValue"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="4"><span>默认，一有数据就推送</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="2" :offset="1" class="ml20"><span>提醒内容：</span></el-col>
                            <el-col :span="10">
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入提醒内容"
                                >
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row class="setTitle mt20">
                            <el-col :span="2" ><span>发送邮件</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="2" :offset="1" class="ml48"><span>邮件标题：</span></el-col>
                            <el-col :span="4">
                                <el-input></el-input>
                            </el-col>
                            <el-col :span="4"><span>（默认同主题）</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="3"><span>邮件收件人字段：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="frequency" placeholder="请选择">
                                    <el-option
                                        v-for="item in freValue"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2"><span>（Group By）</span></el-col>
                            <el-col :span="3"><span>收件人地址手工录入：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="frequency" placeholder="请选择">
                                    <el-option
                                        v-for="item in freValue"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="3"><span>（多地址逗号间隔）</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="3"><span>邮件抄送地址字段：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="frequency" placeholder="请选择">
                                    <el-option
                                        v-for="item in freValue"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2"><span>（Group By）</span></el-col>
                            <el-col :span="3"><span>收件人地址手工录入：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="frequency" placeholder="请选择">
                                    <el-option
                                        v-for="item in freValue"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="3"><span>（多地址逗号间隔）</span></el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="2" :offset="1" class="ml48"><span>邮件提醒内容：</span></el-col>
                            <el-col :span="10">
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入邮件提醒内容"
                                >
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row class="mt20">
                            <el-col :span="2" :offset="4">
                                <el-radio v-model="attachment" label="1">发送附件</el-radio>
                            </el-col>
                            <el-col :span="2"><span>附件格式：</span></el-col>
                            <el-col :span="4">
                                <el-select v-model="frequency" placeholder="请选择">
                                    <el-option
                                        v-for="item in freValue"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <div class="btn-container">
                            <el-button>上一步</el-button>
                            <el-button type="primary">确定</el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {  
      includeChild: true,
      dataSource: "1",
      sqltag: "first",
      frequency:'',
      jstx:'',
      radio:"1",
      freValue: [{
          value: '1',
          label: '自定义运行一次'
      },{
          value: '2',
          label: '每天一次'
      }],
      jstxValue: [{
          value: '1',
          label: 'wechat'
      },{
          value: '2',
          label: 'qq'
      }],
      attachment:'1'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style>
.el-transfer {
  width: 510px;
  margin: 10px auto;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
  font-size: 12px;
}
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
  font-size: 12px;
}
.el-col > span{
    float:right;
    font-size:12px;
    margin: 5px 5px 0 0;
}
.setTitle{
    height: 40px;
    background-color: #eee;
    line-height: 33px;
}
.setTitle span{
    font-weight: bold;
}
.ml48{
    margin-left:48px;
}
</style>


